<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--  // 1、省市地区二级联动，页面加载完毕后显示出可以选择的省份，当省改变显示省份对应的市
        // 2、实现省市区三级联动(可选)
       //3、你们开始做第一道题的时候要使用onselect事件。取select标签的值拿dom对象调用value属性-->
    <!-- 思考步骤：1、使用表单属性创建下拉 2、获取元素 3、利用数组提供数据-->
    <!-- <select id="province">
        <option value="1">湖北省</option>
        <option value="2">河南省</option>
        <option value="3">湖南省</option>
        <option value="4">广东省</option>
    </select>
    <select id="city">
        <option value="1">武汉市</option>
        <option value="2">郑州市</option>
        <option value="3">长沙市</option>
        <option value="4">广州市</option>
    </select>
    <script>
        document.querySelector("#province").onchange=function(){
            var respro=this.value;
            document.querySelector("#city").value=respro;
        }  
    </script> -->
    <select id="province"></select>
    <select id="city">
        <option>武汉市</option>
    </select>
    <script>
         var objcty = { 湖北省: ["武汉市", "荆州市", "潜江市", "宜昌市"], 河南省: ["郑州市", "郑州市", "郑州市", "郑州市"], 湖南省: ["长沙市", "长沙市", "长沙市", "长沙市"], 广东省: ["广州市", "广州市", "广州市", "广州市", "广州市", "广州市"] }
            var str = "";
            for(key in objcty){
                str+= `<option>${key}</option>`
            }
        document.querySelector("#province").innerHTML = str
        document.querySelector("#province").onchange = function () {
            var str1 = "";
            var proviceName = this.value;
            objcty[proviceName].forEach(function (item) {
                str1 += `<option>${item}</option>`
            })
            document.querySelector("#city").innerHTML = str1;
        }
    </script>
</body>

</html>